<template>
  <div>
    <BaseForm
      ref="searchForm"
      type="search"
      :items="formSearchItems"
      v-model:form="searchParams"
      @search="handleSearch"
    >
      <template #suffix-button>
        <el-button type="primary" @click="handleEdit({})">
          <el-icon>
            <Plus />
          </el-icon>
          添加
        </el-button>
        <el-button type="primary" @click="handleUpload()">
          <el-icon>
            <Plus />
          </el-icon>
          导入
        </el-button>
      </template>
    </BaseForm>
    <BaseTable
      ref="baseTable"
      :searchParams="searchParams"
      :defaultHeight="284"
      :serial="true"
      :getTableDataFn="lineService.getGridPageList"
    >
      <el-table-column prop="powerCode" label="供电单位编码" />
      <el-table-column prop="powerName" label="供电单位名称" />
      <el-table-column prop="lineCode" label="线路编号" />
      <el-table-column prop="lineName" label="线路名称" />
      <el-table-column prop="areaCode" label="台区编号" />
      <el-table-column prop="areaName" label="台区名称" />
      <el-table-column prop="updateTime" label="最后修改时间">
        <template #header>
          <span>最后修改时间</span>
          <SortTable
            :sortTablekey="sortTablekey"
            @click="sortTablekey = 1"
            :handleSearch="handleSearch"
          >
          </SortTable>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.row)"
            >编辑</el-link
          >
          <el-link
            :underline="false"
            link
            type="danger"
            size="small"
            @click.prevent="handleDel(scope.row)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog
      v-if="dialogVisible"
      :title="(!ruleForm.id ? '新增' : '编辑') + '网格信息'"
      :handleCancel="handleCancel"
      :dialogVisible="dialogVisible"
    >
      <BaseForm
        v-if="dialogVisible"
        type="rule"
        :handleOk="handleOk"
        :handleCancel="handleCancel"
        :items="formItems"
        v-model:form="ruleForm"
        :rules="rules"
        label-width="120px"
        :refresh="handleSearch"
      >
        <template #default>
          <el-form-item label="供电单位编号" prop="powerCode">
            <autocompletePage
              :item="powerCodeItem"
              v-model="ruleForm.powerCode"
              placeholder="请输入供电单位编号，或选择供电单位编号"
              style="width: 100%"
              popperClass="power-code-autocompletePage"
              key="key01"
            />
            <!-- <el-autocomplete style="width:100%" value-key="powerCode" v-model="ruleForm.powerCode" :fetch-suggestions="queryPowerCodeSearch" clearable
                            class="inline-input w-50" placeholder="请输入供电单位编号，或选择供电单位编号">
                        </el-autocomplete> -->

          </el-form-item>
          <el-form-item label="供电单位名称" prop="powerName">
            <autocompletePage
              :item="powerNameItem"
              v-model="ruleForm.powerName"
              placeholder="请输入供电单位名称，或选择供电单位名称"
              style="width: 100%"
              popperClass="power-code-autocompletePage"
              key="key02"
            />
            <!-- <el-autocomplete
              style="width: 100%"
              value-key="powerName"
              v-model="ruleForm.powerName"
              :fetch-suggestions="queryPowerNameSearch"
              clearable
              class="inline-input w-50"
              placeholder="请输入供电单位名称，或选择供电单位名称"
            >
            </el-autocomplete> -->
          </el-form-item>

          <el-form-item label="线路编号" prop="lineCode">
            <autocompletePage
              :item="lineCodeItem"
              v-model="ruleForm.lineCode"
              placeholder="请输入线路编号，或选择线路编号"
              style="width: 100%"
              popperClass="power-code-autocompletePage"
              key="key03"
            />
            <!-- <el-autocomplete
              style="width: 100%"
              value-key="lineCode"
              v-model="ruleForm.lineCode"
              :fetch-suggestions="queryLineCodeSearch"
              clearable
              class="inline-input w-50"
              placeholder="请输入线路编号，或选择线路编号"
            >
            </el-autocomplete> -->
          </el-form-item>
          <el-form-item label="线路名称" prop="lineName">
            <autocompletePage
              :item="lineNameItem"
              v-model="ruleForm.lineName"
              placeholder="请输入线路名称，或选择线路名称"
              style="width: 100%"
              popperClass="power-code-autocompletePage"
              key="key04"
              :search="{
                source:1
              }"
            />
            <!-- <el-autocomplete
              style="width: 100%"
              value-key="lineName"
              v-model="ruleForm.lineName"
              :fetch-suggestions="queryLineNameSearch"
              clearable
              class="inline-input w-50"
              placeholder="请输入线路名称，或选择线路名称"
            >
            </el-autocomplete> -->
          </el-form-item>

          <el-form-item label="台区编号" prop="areaCode">
            <autocompletePage
              :item="areaCodeItem"
              v-model="ruleForm.areaCode"
              placeholder="请输入台区编号，或选择台区编号"
              style="width: 100%"
              popperClass="power-code-autocompletePage"
              key="key05"
            />
            <!-- <el-autocomplete
              style="width: 100%"
              value-key="areaCode"
              v-model="ruleForm.areaCode"
              :fetch-suggestions="queryAreaCodeSearch"
              clearable
              class="inline-input w-50"
              placeholder="请输入台区编号，或选择台区编号"
            >
            </el-autocomplete> -->
          </el-form-item>
          <el-form-item label="台区名称" prop="areaName">
            <autocompletePage
              :item="areaNameItem"
              v-model="ruleForm.areaName"
              placeholder="请输入台区名称，或选择台区名称"
              style="width: 100%"
              popperClass="power-code-autocompletePage"
              key="key06"
              :search="{
                source:1
              }"
            />
            <!-- <el-autocomplete
              style="width: 100%"
              value-key="areaName"
              v-model="ruleForm.areaName"
              :fetch-suggestions="queryAreaNameSearch"
              clearable
              class="inline-input w-50"
              placeholder="请输入台区名称，或选择台区名称"
            >
            </el-autocomplete> -->
          </el-form-item>
        </template>
      </BaseForm>
    </BaseDialog>
    <ImportFile
      v-if="visibleUpload"
      v-model:dialogVisible="visibleUpload"
      type="grid"
      :downFile="lineService.failAreaDownload"
      :exportFn="lineService.exportGrid"
      :handleSearch="handleSearch"
      downUrl="/template/static/台区导入模板.xlsx"
      fileName="台区导入模板"
    ></ImportFile>
  </div>
</template>

<script setup lang="ts">
import { powerService } from "@/api/power";
import { lineService } from "@/api/line";
import openMsgBox from "@/hooks/messageBox.js";
import autocompletePage from "@/components/autocompletePage.vue";

const options = ref([]);
const formSearchItems = ref([
  {
    name: "供电单位编号",
    key: "powerCode",
    type: "input",
  },
  {
    name: "供电单位名称",
    key: "powerName",
    type: "input",
  },
  {
    name: "线路编号",
    key: "lineCode",
    type: "input",
  },
  {
    name: "线路名称",
    key: "lineName",
    type: "input",
  },
  {
    name: "台区编号",
    key: "areaCode",
    type: "input",
  },
  {
    name: "台区名称",
    key: "areaName",
    type: "input",
  },
]);
const formItems = ref([
  /* {
            name: '供电单位编号',
            key: 'powerCode',
            type: 'input',
        },
        {
            name: '供电单位名称',
            key: 'powerName',
            type: 'input',
        },
        {
            name: '线路编号',
            key: 'lineCode',
            type: 'input',
        },
        {
            name: '线路名称',
            key: 'lineName',
            type: 'input',
        },
        {
            name: '台区编号',
            key: 'areaCode',
            type: 'input',
        },
        {
            name: '台区名称',
            key: 'areaName',
            type: 'input',
        }, */
]);

const searchParams = ref({
  lineName: "",
  powerId: "",
});
const areaList = ref([]);
const queryByQueryDto = () => {
  lineService.queryByQueryDto({ data: {} }).then((res) => {
    areaList.value = res.data;
  });
};
const powerCodeItem = ref({
  name: "供电单位编号",
  key: "powerCode",
  funName: "getByAreaQueryByPower",
});
const powerNameItem = ref({
  name: "供电单位名称",
  key: "powerName",
  funName: "getByAreaQueryByPower",
});
const lineCodeItem = ref({
  name: "线路编号",
  key: "lineCode",
  funName: "getByAreaQueryByLine",
});
const lineNameItem = ref({
  name: "线路名称",
  key: "lineName",
  funName: "getByAreaQueryByLine",
});
const areaCodeItem = ref({
  name: "台区编号",
  key: "areaCode",
  funName: "getByAreaQueryByArea",
});
const areaNameItem = ref({
  name: "台区名称",
  key: "areaName",
  funName: "getByAreaQueryByArea",
});

onMounted(() => {
  //   getPowerList();
  //   queryByQueryDto();
  //   queryPowerList();
  //   queryLineList();
});
const queryAreaCodeSearch = (queryString: string, cb: any) => {
  const results = queryString
    ? areaList.value.filter((n) => n.areaCode.indexOf(queryString) > -1)
    : areaList.value;
  cb(results);
};
const queryAreaNameSearch = (queryString: string, cb: any) => {
  const results = queryString
    ? areaList.value.filter((n) => n.areaName.indexOf(queryString) > -1)
    : areaList.value;
  cb(results);
};

const powerList = ref([]);
const queryPowerList = () => {
  powerService.queryByQueryDto({ data: {} }).then((res) => {
    powerList.value = res.data;
  });
};

const queryPowerCodeSearch = (queryString: string, cb: any) => {
  const results = queryString
    ? powerList.value.filter((n) => n.powerCode.indexOf(queryString) > -1)
    : powerList.value;
  cb(results);
};
const queryPowerNameSearch = (queryString: string, cb: any) => {
  const results = queryString
    ? powerList.value.filter((n) => n.powerName.indexOf(queryString) > -1)
    : powerList.value;
  cb(results);
};
const lineList = ref([]);
const queryLineList = () => {
  lineService.queryLineDto({ data: {} }).then((res) => {
    lineList.value = res.data;
  });
};

const queryLineCodeSearch = (queryString: string, cb: any) => {
  const results = queryString
    ? lineList.value.filter((n) => n.lineCode.indexOf(queryString) > -1)
    : lineList.value;
  cb(results);
};
const queryLineNameSearch = (queryString: string, cb: any) => {
  const results = queryString
    ? lineList.value.filter((n) => n.lineName.indexOf(queryString) > -1)
    : lineList.value;
  cb(results);
};

const visibleUpload = ref(false);
const handleUpload = () => {
  visibleUpload.value = true;
};
const getPowerList = () => {
  powerService.getPowerList({ data: {} }).then((res) => {
    options.value = res.data.map((n) => {
      return {
        label: n.powerName,
        value: n.powerId,
      };
    });
  });
};
const baseTable = ref(null);
const sortTablekey = ref(1);
const handleSearch = (data = { sort: undefined }, e = "") => {
  if (e != "sort") sortTablekey.value = 0;
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  });
};
const ruleForm = ref({
  id: null,
  powerCode: "",
  powerName: "",
  lineCode: "",
  lineName: "",
  areaCode: "",
  areaName: "",
  powerIdList: "",
});
const rules = reactive({
  powerCode: [{ required: true, message: "请输入", trigger: "change" }],
  powerName: [{ required: true, message: "请输入", trigger: "change" }],
  lineCode: [{ required: true, message: "请输入", trigger: "change" }],
  lineName: [{ required: true, message: "请输入", trigger: "change" }],
  areaCode: [{ required: true, message: "请输入", trigger: "change" }],
  areaName: [{ required: true, message: "请输入", trigger: "change" }],
});
const dialogVisible = ref(false);

const handleEdit = (row) => {
  ruleForm.value = { ...row };

  dialogVisible.value = true;
};
const handleCancel = () => {
  dialogVisible.value = false;
};

const handleDel = (row) => {
  openMsgBox(
    {},
    () => {
      return lineService.delGrid({ data: row.id });
    },
    () => {
      handleSearch();
    }
  );
};
const handleOk = () => {
  if (ruleForm.value.id) {
    return lineService.updateGrid({
      data: { ...ruleForm.value },
    });
  } else {
    return lineService.addGrid({
      data: { ...ruleForm.value },
    });
  }
};
</script>

<style lang="scss" scoped></style>
